<template>
  <div class="root">
    <div class="nav-bar">
      <div class="left">
        <a-button class="back-btn" type="link" @click="back"
          ><a-icon type="left"></a-icon>返回</a-button
        >
        <a-divider type="vertical" />
        <span class="model-name"
          ><a-icon-font class="icon" type="iconsuanfa1"></a-icon-font>
          {{ algorithm.name ? algorithm.name : '' }}</span
        >
      </div>
      <div class="right">
        <!-- <a-button v-if="algorithm && !algorithm.uid" class="btn">分享</a-button> -->
        <!-- <a-button v-if="algorithm && !algorithm.uid" class="btn">编辑</a-button> -->
        <!-- <a-button v-if="algorithm && !algorithm.uid" class="btn" type="primary">创建模型</a-button> -->
        <a-button
          v-if="!algorithm.modelId && algorithm.publicOpen === 1"
          class="btn"
          @click="download"
          >下载</a-button
        >
        <!-- 本地才展示 -->
        <a-button
          v-if="algorithm.modelId"
          class="btn"
          type="primary"
          @click="uninstall"
          >卸载</a-button
        >
        <a-button
          v-if="!algorithm.modelId"
          class="btn"
          type="primary"
          :disabled="algorithm.install"
          @click="install"
          >{{ algorithm.install ? '已安装' : '安装' }}</a-button
        >
      </div>
    </div>
    <a-spin :spinning="spinning">
      <div class="main-content">
        <a-row type="flex">
          <a-col flex="126px">
            <img
              width="126px"
              height="126px"
              :src="algorithm.cover ? algorithm.cover : defaulCover"
            />
          </a-col>
          <a-col flex="calc(100% - 126px)" style="padding-left: 12px;">
            <div class="bottom-space" type="flex" style="min-height: 60px;">
              <span class="font-content">{{
                algorithm.summary ? algorithm.summary : '无'
              }}</span>
            </div>
            <a-row class="bottom-space">
              <a-col :span="8" class="font-content" align="left"
                ><span class="font-title">发布时间：</span
                >{{ algorithm.publicTime ? algorithm.publicTime : '-' }}</a-col
              >
              <a-col :span="8" class="font-content" align="left"
                ><span class="font-title">版本号：</span
                >{{ algorithm.version ? algorithm.version : '-' }}</a-col
              >
              <a-col :span="8" class="font-primary" align="right"
                ><a disabled>历史版本</a></a-col
              >
            </a-row>
            <a-row type="flex">
              <a-col flex="70px" align="left">关键词：</a-col>
              <a-col flex="auto" align="left">
                <span
                  v-for="keyword in algorithm && algorithm.keyword
                    ? algorithm.keyword.split(',')
                    : ''"
                  v-show="algorithm && algorithm.keyword"
                  :key="keyword"
                  class="key-word font-primary"
                  @click="clickSearch(keyword)"
                  >{{ keyword }}</span
                >
                <span v-if="!algorithm"></span>
              </a-col>
              <a-col flex="auto" align="right">
                <a-avatar
                  class="avatar"
                  :src="algorithm.profile ? algorithm.profile : defaultAvatar"
                >
                </a-avatar>
                {{ algorithm.owner }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <a-tabs default-active-key="1" align="left" class="tabs">
          <a-tab-pane key="1" tab="基础信息">
            <my-title title="算法分类" />
            <p
              v-for="item in algorithm.field"
              :key="item"
              class="font-title left-space"
            >
              {{ item ? item.split(',')[0] : '-' }}：<span
                class="font-content"
                >{{ item ? item.split(',')[1] : '-' }}</span
              >
            </p>
            <my-title title="算法详细说明" />
            <div class="left-space font-content">
              {{ algorithm.modelDesc ? algorithm.modelDesc : '无' }}
            </div>
            <my-title title="相关资料" />
            <p v-for="item in algorithm.resource" :key="`resource-${item}`">
              <a :href="item" target="_blank" class="left-space font-primary">
                {{ item }}
              </a>
            </p>
            <span
              v-if="!algorithm.resource || algorithm.resource.length === 0"
              class="left-space font-content"
              >无</span
            >
            <my-title title="参考文献" />
            <p v-for="item in algorithm.reference" :key="`reference-${item}`">
              <a :href="item" target="_blank" class="left-space font-primary">
                {{ item }}
              </a>
            </p>
            <span
              v-if="!algorithm.reference || algorithm.reference.length === 0"
              class="left-space font-content"
              >无</span
            >
            <my-title title="引用格式" />
            <div class="left-space font-content">
              {{
                `${algorithm.owner}(${
                  algorithm && algorithm.publicTime
                    ? algorithm.publicTime.split('-')[0]
                    : '-'
                })${algorithm.name}(${
                  algorithm.version
                })[算法].https://jianwei.zjvis.net/community/algorithmDetail?id=${
                  algorithm.id
                }`
              }}
            </div>
            <my-title title="使用说明" />
            <div class="left-space font-content">
              <!-- {{ algorithm.instruction ? algorithm.instruction : '无' }} -->
              <a-tabs default-active-key="1" align="left" class="tabs">
                <a-tab-pane key="1" tab="特征列要求">
                  <a-table
                    :columns="colColumns"
                    :data-source="colData"
                    row-key="dtype"
                    :pagination="false"
                  ></a-table>
                </a-tab-pane>
                <a-tab-pane key="2" tab="输入说明" force-render>
                  <a-table
                    :columns="inputColumns"
                    :data-source="inputData"
                    row-key="name"
                    :pagination="false"
                  ></a-table>
                </a-tab-pane>
                <a-tab-pane key="3" tab="输出说明" force-render>
                  <a-table
                    :columns="outputColumns"
                    :data-source="outputData"
                    row-key="col_name"
                    :pagination="false"
                  ></a-table>
                </a-tab-pane>
                <!-- <a-tab-pane key="4" tab="示例" force-render>
                  <img
                    :src="
                      algorithm.id
                        ? require(`@/assets/community/${algorithm.id}.png`)
                        : '@/assets/view/empty2.png'
                    "
                    width="100%"
                  />
                </a-tab-pane> -->
              </a-tabs>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="知识图谱" force-render disabled>
            Content of Tab Pane 2
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-spin>

    <un-install-modal
      :visible="uninstallVisible"
      :title="`无法卸载“${algorithm.name}”！`"
      :project-ids="projects"
      :type="algorithm.type"
      @cancel="uninstallVisible = false"
    />
  </div>
</template>

<script>
import MyTitle from '@/components/plugin/MyTitle.vue'
import UnInstallModal from '@/components/plugin/UnInstallModal.vue'
import DataViewStore from '@/store/modules/dataview'
import {
  queryLocalModelById,
  queryOnlineModelById,
  installModel,
  queryProjectUsed,
  deleteLocalModel,
} from '@/api/plugin'

export default {
  name: 'AlgorithmDetail',
  components: { MyTitle, UnInstallModal },
  data() {
    return {
      algorithm: {},
      algoId: null,
      queryFm: {
        whereValue: undefined,
        orderKey: 'gmt_create',
        order: 'asc',
        pageIndex: 1,
        pageSize: 10,
      },
      spinning: false,
      defaultAvatar: require('@/assets/user/avatar0.png'),
      defaulCover: require('@/assets/default.png'),
      uninstallVisible: false,
      projects: [],
      donwloadAble: false,
      colColumns: [
        {
          title: '数据类型',
          key: 'dtype',
          dataIndex: 'dtype',
          slots: { title: 'dtype' },
        },
        {
          title: '是否支持多列',
          key: 'multi_col',
          dataIndex: 'multi_col',
          slots: { title: 'multi_col' },
        },
        {
          title: '其他说明',
          key: 'other',
          dataIndex: 'other',
          slots: { title: 'other' },
        },
      ],
      colData: [],
      inputColumns: [
        {
          title: '参数名称',
          key: 'name',
          dataIndex: 'name',
          slots: { title: 'name' },
        },
        {
          title: '数据类型',
          key: 'dtype',
          dataIndex: 'dtype',
          slots: { title: 'dtype' },
        },
        {
          title: '是否必填',
          key: 'req',
          dataIndex: 'req',
          slots: { title: 'req' },
        },
        {
          title: '数据范围要求',
          key: 'scope',
          dataIndex: 'scope',
          slots: { title: 'scope' },
        },
        {
          title: '其他说明',
          key: 'other',
          dataIndex: 'other',
          slots: { title: 'other' },
        },
      ],
      inputData: [],
      outputColumns: [
        {
          title: '新增列名',
          key: 'col_name',
          dataIndex: 'col_name',
          slots: { title: 'col_name' },
        },
        {
          title: '数据类型',
          key: 'dtype',
          dataIndex: 'dtype',
          slots: { title: 'dtype' },
        },
        {
          title: '其他说明',
          key: 'other',
          dataIndex: 'other',
          slots: { title: 'other' },
        },
      ],
      outputData: [],
    }
  },
  mounted() {},
  created() {
    this.algoId = this.$route.query.id
    if (this.algoId) {
      this.queryDetail()
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    clickSearch(value) {
      this.$router.push(`/management/plugin/result?tab=1&key=${value}`)
    },
    async queryDetail() {
      this.spinning = true
      try {
        let response = null
        if (this.$route.query.tab === '1') {
          response = await queryLocalModelById({ data: { id: this.algoId } })
        } else {
          response = await queryOnlineModelById({ data: { id: this.algoId } })
        }
        this.spinning = false
        if (response.data.code === 100) {
          this.algorithm = response.data.result
          if (this.algorithm.field) {
            this.algorithm.field = this.algorithm.field.split(';')
          }
          if (this.algorithm.resource) {
            this.algorithm.resource = this.algorithm.resource.split(';')
          }
          if (this.algorithm.reference) {
            this.algorithm.reference = this.algorithm.reference.split(';')
          }
          const instruction = JSON.parse(this.algorithm.instruction)
          this.colData = [instruction.col_req]
          this.inputData = instruction.input
          this.outputData = instruction.output
        } else {
          this.$message.error(response.data.message)
        }
      } catch {
        this.spinning = false
      }
    },
    async queryOnlineDetail() {
      this.spinning = true
      try {
        let response = null
        response = await queryOnlineModelById({ data: { id: this.algoId } })

        this.spinning = false
        if (response.data.code === 100) {
          this.algorithm = response.data.result
          if (this.algorithm.field) {
            this.algorithm.field = this.algorithm.field.split(';')
          }
        } else {
          this.$message.error(response.data.message)
        }
      } catch {
        this.spinning = false
      }
    },
    download() {
      window.open(`/api/modelOnline/download?id=${this.algoId}`)
    },
    async install() {
      const response = await installModel({ data: { id: this.algoId } })
      if (response.data.code === 100) {
        this.queryDetail()
        this.$message.success('安装成功！请到【我的-社区-本地已安装】查看')
        DataViewStore.setoperateModel({
          id: this.algoId,
          type: this.$route.query.tab === '1' ? 'local' : 'online',
        })
      } else {
        this.$message.error(response.data.message)
      }
    },
    async uninstall() {
      // 检查是否可卸载
      const response1 = await queryProjectUsed({
        data: { modelId: this.algorithm.modelId },
      })
      if (response1.data.code === 100) {
        this.projects = response1.data.result
        if (this.projects.length > 0) {
          this.uninstallVisible = true
        } else {
          const response = await deleteLocalModel({
            data: { id: this.algorithm.id },
          })
          if (response.data.code === 100) {
            this.$message.success('卸载成功！')
            DataViewStore.setoperateModel({
              id: this.algoId,
              type: this.$route.query.tab === '1' ? 'local' : 'online',
            })
            this.$router.push('/management/plugin/list')
          } else {
            this.$message.error(response.data.message)
          }
        }
      } else {
        this.$message.error(response1.data.message)
      }
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/ .ant-btn {
  border-radius: 4px;
}

.root {
  // font-family: PingFangSC-Regular, PingFang SC;
  // height: 100vh;
  padding: 16px;
  width: 100vw;

  .nav-bar {
    background: #fff;
    height: 48px;
    margin-bottom: 12px;
    padding: 8px 24px;
    position: relative;
    width: 100%;

    .left {
      align-items: center;
      display: flex;
      left: 0;
      position: absolute;

      .back-btn {
        padding-right: 0;
      }

      .model-name {
        align-items: center;
        color: #373b52;
        display: flex;
        // font-family: PingFangSC-Medium, PingFang SC;
        font-size: 16px;

        .icon {
          font-size: 20px;
          margin-right: 8px;
        }
      }
    }

    .right {
      position: absolute;
      right: 24px;

      .btn {
        margin-left: 16px;
      }
    }
  }

  .main-content {
    background: #fff;
    min-height: calc(100vh - 200px);
    padding: 24px;
    width: 100%;

    .line1 {
      display: flex;
      margin-bottom: 8px;

      .title {
        color: #5d637e;
        font-size: 16px;
      }

      .user {
        align-items: center;
        display: flex;
        position: absolute;
        right: 0;

        .user-icon {
          height: 18px;
          margin-right: 4px;
          width: 18px;
        }
      }
    }

    .buttons {
      display: flex;
      flex-direction: row-reverse;

      .btn {
        align-items: center;
        display: flex;

        margin-left: 34px;

        .btn-icon {
          font-size: 20px;
          margin-right: 4px;
        }
      }
    }

    .key-word {
      cursor: pointer;
      margin-right: 16px;
    }

    .tabs {
      margin-top: 12px;
      width: 100%;
    }

    .font-title {
      color: #5d637e;
    }

    .font-content {
      color: #373b52;
    }

    .font-primary {
      color: #6973ff;
    }

    .left-space {
      margin-left: 12px;
    }

    .bottom-space {
      margin-bottom: 8px;
    }

    .normal-btn {
      align-items: center;
      color: #6973ff;
      display: flex;
      margin-left: 34px;

      &:hover {
        cursor: pointer;
      }

      .btn-icon {
        font-size: 20px;
        margin-right: 4px;
      }
    }

    .avatar {
      background-color: #eaeafd;
      height: 18px;
      margin-right: 8px;
      width: 18px;
    }
  }
}
</style>
